<template>
  <div>
    <div>
      <el-form :inline="true" :model="tableForm" class="demo-form-inline">
        <el-form-item label="分类名称">
          <el-input v-model="tableForm.name" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="分类状态">
          <el-select
            v-model="tableForm.status"
            placeholder="请选择"
            style="width: 240px"
            clearable
          >
            <el-option label="显示" :value="0" />
            <el-option label="隐藏" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="success" class="!ml-0" @click="newSave">
      新增类别
    </el-button>
    <el-table
      :data="tableData"
      :tree-props="treeProps"
      row-key="id"
      default-expand-all
    >
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="image" label="图片">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.image"
          />
        </template>
      </el-table-column>
      <el-table-column prop="top" label="排序" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.status == 0">显示</el-tag>
          <el-tag type="info" v-if="scope.row.status == 1">隐藏</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" class="!ml-0" @click="toSave(scope.row)">
            添加类别
          </el-button>
          <el-button type="danger" class="!ml-0" @click="delete scope.row">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div></div>
  <div>
    <el-dialog v-model="dialogFormVisible" title="添加信息" width="500">
      <el-form :model="form">
        <el-form-item label="类别名称" :label-width="formLabelWidth">
          <el-input v-model="form.typeName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="类别图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:10010/shop/index/uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers="headers"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
              style="width: 150px; height: 150px"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="类别排序" :label-width="formLabelWidth">
          <el-input-number v-model="form.typeTop" :min="0" />
        </el-form-item>
        <el-form-item label="类别状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.typeStatus">
            <el-radio :value="0" size="large">显示</el-radio>
            <el-radio :value="1" size="large">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { saveType, selectTypeList } from "../api/api";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
interface User {
  id: number;
  date: string;
  name: string;
  address: string;
  hasChildren?: boolean;
  children?: User[];
}

const treeProps = ref({
  checkStrictly: false,
});
const selectable = (row: User) => ![1, 31].includes(row.id);

const tableData = ref([]);
const imageUrl = ref("");
const form = ref({
  typeImage: "",
});

const tableForm = ref({});
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
var myChart = null;

const newSave = () => {
  dialogFormVisible.value = true;
};

const toSave = (row: any) => {
  dialogFormVisible.value = true;
  if (row != null) {
    form.value.typePid = row.id;
  }
};

const saveOk = () => {
  if (form.value.typeName == null || form.value.typeName == "") {
    ElMessage.error("名称不能为空");
    return;
  }
  if (form.value.typeImage == null || form.value.typeImage == "") {
    ElMessage.error("图片不能为空");
    return;
  }
  if (form.value.typeTop == null || form.value.typeTop <= 0) {
    ElMessage.error("排序不能为空");
    return;
  }
  if (form.value.typeStatus == null || form.value.typeStatus < 0) {
    ElMessage.error("状态不能为空");
    return;
  }
  saveType(form.value).then((res) => {
    if (res.data.flag) {
      ElMessage.success("添加成功");
      dialogFormVisible.value = false;
      getList();
    } else {
      ElMessage.error(res.data.msg);
    }
    reset();
  });
};

const reset = () => {
  form.value = {
    typeName: "",
    typeImage: "",
    typeTop: "",
    typeStatus: "",
  };
  imageUrl.value = "";
};

const headers = ref({
  token: sessionStorage.getItem("token"),
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = response.data;
  form.value.typeImage = imageUrl.value;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("文件大小不能超过 2MB!");
    return false;
  }
  return true;
};

const getList = () => {
  selectTypeList(tableForm.value).then((res) => {
    if (res.data.flag) {
      tableData.value = res.data.data;
    }
  });
};

onMounted(() => {
  getList();
});
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
